<template>
  <div
    :style="'height: ' + innerHeight + 'px'"
    v-loading="loading"
    element-loading-text="页面正在加载中..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :element-loading-lock="true"
  >
    <!--分页组件-->
    <pager
      :tbcols="tbcols"
      :tbdata="tbdata"
      :Pagination="Pagination"
      :reloadPagerData="reloadPagerData"
      ref="tbpager"
    >
      <!--分页控件标题区域-->
      <template #soltTitle> 操作日志 </template>
      <!--表格操作按钮区域  以具名插槽的方式使用-->
      <template #slotBts>
        <el-button type="primary" @click="reloadPagerData">查询</el-button>
        <!--
      <el-button type="info">编辑</el-button>      
      -->
      </template>

      <template #serchInner>
        <el-form >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="Creator"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

    </pager>
  </div>
</template>
<script lang="ts" setup name="operatelog">
import http from '@/api/http'
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import pager from '@/components/zjc/pager.vue'
import { type Paginations } from '@/model/pagination.ts'

const Creator = ref(null)
const loading = ref(false)
const innerHeight = ref(window.innerHeight - 140)

//定义分页参数
let Pagination: Paginations = reactive({
  Sort: 'CreateDate',
  SortType: ' desc ',
  PageIndex: 1,
  PageSize: 10,
  TotalCount: 0
})
//定义表格列的信息
let tbcols: any[] = [
  { prop: 'Content', label: '日志内容', width: 600, align: 'left' },
  { prop: 'Category', label: '日志分类', width: 180, align: 'center' },
  { prop: 'MenuModel', label: '所在模块', width: 180, align: 'center' },
  { prop: 'Creator', label: '操作', width: 180, align: 'center' },
  { prop: 'CreateDate', label: '操作时间', width: 180, align: 'center' },
  { prop: 'beizhu', label: '备注', width: null, align: 'center' },
]
//定义表格数据
let tbdata: any[] = reactive([])


//重新执行分页
const reloadPagerData = async (Pagination: Paginations) => {
  loading.value = true
  await loadData().then((res) => {
    tbdata.splice(0, tbdata.length)
    tbdata.push(...res)
    loading.value = false
  })
}


async function loadData() {
  //第一步：加载分页数据
  const arr = await loadPagerData() 
  return arr
}


async function loadPagerData() {
  const requetparam = {};
  Object.assign(requetparam,{"Creator":Creator.value},Pagination);
  //alert(JSON.stringify(requetparam));
  const arr = []
  const res = await http.get('api/operatelog/GetPageDataZjc', {}, false, { params: requetparam })
  if (res.Tag == 1) {
    //alert(JSON.stringify(res.Data));
    arr.push(...res.Data)
    Pagination.TotalCount = res.Total
  } else {
    ElMessage({
      message: '系统异常，操作失败！',
      type: 'error'
    })
  }
  return arr
}

//页面初始化加载完成钩子
onMounted(async () => {
  await reloadPagerData(Pagination)
})

</script>
<style scoped></style>
